<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="basePath" value="${pageContext.request.contextPath}"/> <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="${basePath}/assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${basePath}/assets/css/style.css">
    <link rel="stylesheet" href="${basePath}/assets/css/form-elements.css">
    <link rel="stylesheet" href="${basePath}/assets/css/font-awesome.min.css">
    <title>重置密码</title>
    <style>
        body {
            background: url("${basePath}/assets/img/bg.jpg") no-repeat fixed;
            background-size: cover;
            overflow: hidden;
        }

    </style>
</head>
<body>

<div class="container myBox">
    <div class="col-xs-8 col-xs-offset-4 col-sm-6 col-sm-offset-3 form-box">
        <div class="form-top">
            <div class="form-top-left">
                <h3>重置密码</h3>
                <p>请输入您的邮箱:</p>
            </div>
            <div class="form-top-right">
                <i class="fa fa-key"></i>
            </div>
        </div>
        <div class="form-bottom">
            <form role="form" action="${basePath}/user/resetPassword" method="post" class="login-form">

                <!--上面的输入框尽可能不需要外边距，使用row解决-->
                <div class="row">
                    <div style="margin-bottom: 15px" class="form-inline">
                        <label class="sr-only" for="email">Eamil</label>
                        <input type="text" name="email" placeholder="邮箱" class="email" id="email">
                        <input id="sendCode" type="button" class="btn btn-primary" value="发送验证码"> <%--<script>--%> <%--$("#code").click(function(){--%> <%--$("#eamil").val()--%> <%--var reg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;--%> <%--if(!reg.test($("#mobile").val())){--%> <%--$('#profile .error_mobile').css('display', 'inline');--%> <%--return false;--%> <%--}else{--%> <%--$('#profile .error_mobile').hide();--%> <%--}--%> <%--var countdown = 60;--%> <%--var _this = $(this);--%> <%--//设置button效果，开始计时--%> <%--_this.attr("disabled", "true");--%> <%--_this.val(countdown + "秒后重新获取");--%> <%--//启动计时器，1秒执行一次--%> <%--var timer = setInterval(function(){--%> <%--if (countdown == 0) {--%> <%--clearInterval(timer);//停止计时器--%> <%--_this.removeAttr("disabled");//启用按钮--%> <%--_this.val("重新发送验证码");--%> <%--}--%> <%--else {--%> <%--countdown--;--%> <%--_this.val(countdown + "秒后重新获取");--%> <%--}--%> <%--}, 1000);--%> <%--$.ajax({--%> <%--type : 'POST',--%> <%--url : '<%=path%>/user/sendCaptchas',--%> <%--dataType : 'json',--%> <%--data : {'stype':'3','ctype':'1','mobile':$("#mobile").val()},--%> <%--success : function(data) {--%> <%--if(data.errorInfo.errorCode==''){--%> <%--/* alert("短信发送成功"); */--%> <%--}else{--%> <%--alert(data.errorInfo.errorCode);--%> <%--}--%> <%--}--%> <%--});--%> <%--return false;--%> <%--});--%> <%--</script>--%>
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="form-password">验证码</label>
                        <input id="code" type="text" name="code" placeholder="验证码" class="form-control">
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="form-password">Password</label>
                        <input type="password" name="newPassword" placeholder="新密码" class="form-password form-control" id="form-password">
                    </div>
                </div>
                <!--上面的输入框尽可能不需要外边距，使用row包裹起来解决-->

                <!--<div class="checkbox">-->
                <!--<label>-->
                <!--<input type="checkbox"> 记住我-->
                <!--</label>-->
                <!--</div>-->
                <p>${sessionScope.forgetErrorMsg}</p>
                <button type="submit" class="btn">重置</button>

                <div class="row">
                    <div style="padding: 10px 25px">
                        <div style="display: inline-block;float: left" class="text-left"><a href="${basePath}/view/index">返回登录</a>
                        </div>
                        <!--<div style="display: inline-block;float: right" class="text-right"><a href="#">没有账号?</a></div>-->
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>

<!-- Javascript -->
<script src="${basePath}/assets/js/jquery-1.11.1.min.js"></script>
<script src="${basePath}/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="${basePath}/assets/js/jquery.backstretch.min.js"></script>
<script src="${basePath}/assets/js/scripts.js"></script>


<%--ajax用于验证码功能--%>
<script>
    $(function () {
        $("#sendCode").click(function () {
            var email = $("#email").val();
            if ("" === email.trim() || null === email) {
                alert("请输入您的邮箱！");
                return;
            }
            console.log("邮箱是：" + email);

            //ajax
            $.post("${basePath}/user/sendCode", {email: email}, function (data) {
                console.log(data);
                alert(data);
            })
        })
    })
</script>
</body>
</html>